<template>
  <a-card>
    <template #title>
      <a-form>
        <a-row :gutter="16">
          <a-col class="gutter-row" :md="6" :xs="24">
            <a-form-item label="菜单名称">
              <a-input v-model:value="page.name" placeholder=""/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col style="text-align: right" :span="24">
            <a-button type="primary" @click="getMenuList">查询</a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">重置}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </template>
    <div style="margin-bottom: 10px;text-align: right">
      <a-button type="primary" @click="addMenuContents">添加目录</a-button>
    </div>
    <a-table bordered row-key="id" :columns="tableColumn" :data-source="tableData" :pagination="false" :scroll="{x:1000}">
      <template #status="{record }">
        <a-switch :checked="record.status === 1" @change="changeStatus(record)"></a-switch>
      </template>
      <template #operation="{record }">
        <a-button type="link" @click="addMenu(record)">添加下级</a-button>
        <a-button type="link" @click="editMenu(record)">编辑</a-button>
        <a-button type="link" @click="delMenu(record)">删除</a-button>
      </template>
    </a-table>

    <a-modal v-model:visible="visibleMenu.isShow" :title="visibleMenu.title" :afterClose="clearForm" @ok="menuConfirm"
             :maskClosable="false">
      <a-form :model="menuForm" ref="menuRef" :rules="menuRulesForm" :label-col="{span:4}">
        <a-form-item label="菜单名称" name="name">
          <a-input v-model:value="menuForm.name"/>
        </a-form-item>
        <a-form-item label="菜单类型" name="type" v-if="isAddContents">
          <a-radio-group v-model:value="menuForm.type">
            <a-radio :value="0">目录</a-radio>
            <a-radio :value="1">菜单</a-radio>
            <a-radio :value="2">按钮</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="请求地址" name="url">
          <a-input v-model:value="menuForm.url"/>
        </a-form-item>
        <a-form-item label="权限标识" name="perms">
          <a-input v-model:value="menuForm.perms"/>
        </a-form-item>
        <a-form-item label="前端Name" name="webUrl">
          <a-input v-model:value="menuForm.webUrl"/>
        </a-form-item>
        <a-form-item label="菜单icon" name="icon">
          <a-input v-model:value="menuForm.icon"/>
        </a-form-item>
        <a-form-item label="排序" name="orderNum">
          <a-input type="number" v-model:value="menuForm.orderNum"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import {fetMenuList, increaseMenu, updateMenu,} from '@/api/authority'
import {onMounted, reactive, ref, toRefs} from 'vue'
import {message, Modal} from "ant-design-vue";
import {deleteMenu} from "../../../api/authority";

const tableColumn = [
  {
    title:'菜单名称',
    dataIndex: 'name',
    width: 250,
    align: 'left'
  },
  {
    title: '权限标识',
    dataIndex: 'perms',
    width: 100,
    align: 'center'
  },
  {
    title: '编号',
    dataIndex: 'id',
    width: 100,
    align: 'center'
  },
  {
    title:'类型',
    dataIndex: 'type',
    width: 100,
    align: 'center',
    customRender: ({text}) => {
      return text === 0 ? '目录' : text === 1 ? '菜单' : '按钮'
    }
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 100,
    align: 'center'
  },
  {
    title: '排序',
    dataIndex: 'orderNum',
    width: 100,
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 100,
    align: 'center',
    slots: {customRender: 'status',}
  },

  {
    title: 'URL地址',
    dataIndex: 'url',
    width: 100,
    align: 'center'
  },
  {
    title: '前端Name',
    dataIndex: 'webUrl',
    width: 100,
    align: 'center'
  },
  {
    title: '操作',
    width: 150,
    fixed: 'right',
    align: 'center',
    slots: {
      customRender: 'operation',
    },
  },
]
export default {
  name: "MenuManage",
  setup() {
    const menuRef = ref(null)
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      visibleMenu: {
        isShow: false,
        title: '',
        type: ''
      },
      tableData: [],
      menuForm: {},
      menuRulesForm: {},
      isAddContents: true
    })

    async function getMenuList() {
      const res = await fetMenuList(state.page)
      if (res.code === 200) {
        state.tableData = formatTree(res.data.sort((a, b) => a.orderNum - b.orderNum))
      }
    }
    function resetSearch(){
      state.page ={
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      getMenuList()
    }
    // 格式化树
    function formatTree(list) {
      return list.filter(father => {
        const childArr = list.filter(child => father.id === child.parentId)
        if (childArr.length > 0) {
          father.children = childArr.sort((a, b) => a.orderNum - b.orderNum)
        }
        return father.parentId === 0
      })
    }

    async function menuConfirm() {
      const params = state.menuForm
      const api = ((params) => state.visibleMenu.type === 'add' ? increaseMenu(params) : updateMenu(params))
      const res = await api(params)
      if (res.code === 200) {
        state.visibleMenu.isShow = false
        message.success(state.visibleMenu.type === 'add' ? '添加成功' : '编辑成功')
        getMenuList()
      }
    }

    function changeStatus({id, status}) {
      Modal.confirm({
        title: '确认进行此操作' + '?',
        async onOk() {
          const res = await updateMenu({id, status: status === 1 ? 0 : 1})
          if (res.code === 200) {
            message.success('操作成功')
            getMenuList()
          }
        },
      });
    }

    function addMenu(row) {
      state.menuForm.parentId = row.id
      state.menuForm.type = 1
      state.visibleMenu   = {
        isShow: true,
        title: '添加菜单',
        type: 'add'
      }
    }

    function editMenu(row) {
      state.menuForm = {
        ...row,
      }
      state.visibleMenu = {
        isShow: true,
        title: '编辑',
        type: 'edit'
      }
    }
    function delMenu({id}) {
      Modal.confirm({
        title: '确认删除' + '?',
        okType: 'danger',
        async onOk() {
          const res = await deleteMenu({id})
          if (res.code === 200) {
            message.success('删除成功')
            getMenuList()
          }
        },
        class: 'test',
      });

    }

    async function addMenuContents() {
      state.visibleMenu = {
        isShow: true,
        title: '添加目录',
        type: 'add'
      }
      state.menuForm.parentId = 0
      state.isAddContents = false
    }

    function clearForm() {
      state.isAddContents = true
      state.menuForm = {
        type:state.menuForm.type,
      }
    }

    onMounted(() => {
      getMenuList()
    })
    return {
      delMenu,
      addMenu,
      editMenu,
      clearForm,
      menuRef,
      menuConfirm,
      addMenuContents,
      changeStatus,
      tableColumn,
      getMenuList,
      resetSearch,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>

</style>
